<template>
	<view class="change-money">
		<view class="charge-record money-recharge">
			<view class="submmit">
				订单已提交，请尽快完成转账
			</view>
			<view class="down-time all">
				请在<u-count-down color="#FF3F45" :timestamp="timestamp" :show-hours="false"></u-count-down>分钟内完成转账
			</view>
			<view class="contact all">
				转账后若长时间未开通请联系在线客服
			</view>
		</view>
		<view class="charge-info-all money-str">
			<view class="mode-way">
				<text class="all">收款银行</text>
				<view class="mode-select">
					<input v-model="receiveBank" placeholder="收款银行" />
					<view class="mode-copy">复制</view>
				</view>
			</view>
			<view class="mode-way">
				<text class="all">收款卡号</text>
				<view class="mode-select">
					<input v-model="receiveCardnum" placeholder="收款卡号" />
					<view class="mode-copy">复制</view>
				</view>
			</view>
			<view class="mode-way">
				<text class="all">收款姓名</text>
				<view class="mode-select">
					<input v-model="receiveName" placeholder="收款姓名" />
					<view class="mode-copy">复制</view>
				</view>
			</view>
			<view class="mode-way">
				<text class="all">转账附言</text>
				<view class="mode-select">
					<input class="change-bank" v-model="postscript" placeholder="转账附言" />
					<view class="mode-copy">复制</view>
				</view>
			</view>
			<view class="mode-way">
				<text class="all">转账金额</text>
				<view class="mode-select">
					<view class="in-charge">
						<text class="money">￥</text>
						<input class="out-money" v-model="transferAmount" placeholder="转账金额" />
					</view>
					<view class="mode-copy">复制</view>
				</view>
			</view>
			<view class="mode-upload">
				<!-- <u-upload ref="uUpload" :show-upload-list="showUploadList" :action="action">
					<u-icon></u-icon>
				</u-upload> -->
				<text>上传截图</text>
				<u-upload :custom-btn="true">
				    <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
				        <u-icon name="plus" size="60" color="#969696"></u-icon>
				    </view>
				</u-upload>
			</view>
		</view>
		<view class="next-recharge">
			<button class="onbutton" type="default" @click="success">完成充值</button>
		</view>
		<view class="recharge-message">
			注意事项：转账时需要输入附言，充值的金额与附言必须和页面展示一致，否则将无法到账。
		</view>
		<u-modal v-model="showChecked" title="温馨提示" :title-style="{'font-size': '18px', 'font-weight': 'bold'}"
			:show-cancel-button="showCancle" @cancle="cancle" @confirm="gotoConfirm">
			<view class="slot-content">
				<text>确认已经转账成功了吗？</text>
			</view>
		</u-modal>
	</view>
</template>
<script>
export default {
	data(){
	    return {
			action: 'http://192.168.100.17/index.php/index/index/upload',
			showChecked: false,
			showCancle: true,
			timeSet: '',
			timestamp: 1200,
			receiveBank: '', // 收款银行
			receiveCardnum: '', // 收款卡号
			receiveName: '', // 收款姓名
			postscript: '', // 转账附言
			showUploadList: false, // 上传列表
			// transferAmount: '', // 转账金额
		}
	},
	props:{
		rechargeMoney: {
			type: String,
		}
	},
	computed:{
		transferAmount: function(){
			return this.rechargeMoney
		}
	},
	methods:{
		// 完成充值
		success(){
			this.showChecked = true
		},
		cancle(){
			this.showChecked = false
		},
		// 充值确认
		gotoConfirm(){
			// 返回首页
			setTimeout(function() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}, 1)
		}
	}
}
</script>
<style lang="scss">
	.slot-btn{
		width: 100rpx;
		height: 100rpx;
		margin-left: 20rpx;
		line-height: 100rpx;
		text-align: center;
		border-radius: 10rpx;
		border: 1px dashed #969696;
	}
</style>
<style lang="scss" scoped>
.change-money{
	background-color: #F4F5F9;
	.all{
		color: #9E9E9E;
		font-size: 28rpx;
	}
	.mode-select{
		display: flex;
		justify-content: space-between;
	}
	.change-bank{
		color: #F78C16;
	}
	.out-money{
		color: #FF3F45;
		font-size: 40rpx;
		font-weight: bold;
	}
	.charge-record{
		text-align: center;
		.submmit{
			font-size: 34rpx;
			font-weight: bold;
		}
	}
	.in-charge{
		display: flex;
		align-items: center;
		color: red;
		.money{
			font-size: 40rpx;
			font-weight: bold;
		}
	}
	.next-recharge{
		.onbutton{
			color: #FFFFFF;
			background-color: #F59328;
		}
	}
	.slot-content{
		margin: 20rpx 0rpx 80rpx 0rpx;
		text-align: center;
		font-size: 30rpx;
	}
	/deep/ .u-model-footer{
		border-top: 1px solid #E6E6E6;
	}
	.u-model-footer-button{
		color: #0B0101;
	}
	/deep/ .hairline-left{
		color: #F59328 !important;
		border-left: 1px solid #E6E6E6;
	}
	
	.mode-upload{
		margin: 20rpx 0rpx;
		display: flex;
		color: #969696;
	}
	
	.recharge-message{
		padding: 0rpx 40rpx 40rpx;
	}
}
</style>
